<template>
  <div class="help-center">
    <div class="breadcrumb-box">
      帮助中心
      <!-- <breadcrumb class="breadcrumb-container" /> -->
    </div>
    <div class="help-center-con">
      <Navbar class="fixed-header" />

      <div class="sec-title">治理方案</div>
      <div class="help-con">
        <sec-table :tableData="tableData" :tableCol="tableCol"></sec-table>
        <div class="consult">
          有相关问题请加入
          <a
            target="_blank"
            href="https://im.xiaojukeji.com/channel?uid=3555&token=7117629f6a263047fe9fd6b22224c9ba&id=2021193919427815680"
            >数据安全治理平台反馈群<img style="width: 16px" :src="config.dcImg" alt="" /></a
          >咨询
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Navbar } from "@/layout/components";
import Breadcrumb from "@/components/Breadcrumb";
import { helpConfigApi } from "api/api";
export default {
  name: "helpCenter",
  props: {},
  components: { Navbar, Breadcrumb },
  data() {
    return {
      tableData: [],
      tableCol: [
        { label: "风险类型", prop: "class" },
        { label: "风险分类", prop: "sourceLabel" },
        {
          type: "operation",
          label: "操作",
          children: [
            {
              label: "项目背景",
              click: ({ row }) => {
                window.open(row.background);
              },
            },
            {
              label: "治理方案",
              click: ({ row }) => {
                window.open(row.solution);
              },
            },
          ],
        },
      ],
    };
  },
  computed: {},
  created() {
    helpConfigApi().then((res) => {
      let data = res.data[0];
      let config = JSON.parse(data.params.config);
      this.tableData = config;
    });
  },
  mounted() {},
  methods: {},
  watch: {},
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.fixed-header {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 101;
  // width: calc(100% - #{$sideBarWidth});
  width: 100%;
  transition: width 0.28s;
  background: #fff;
}
.breadcrumb-box {
  margin: 0 20px 10px 20px;
  background: #fff;
  padding: 5px;
  font-size: 14px;
}
.help-center {
  padding-top: 65px;
}
.help-center-con {
  margin: 0 20px;
  padding: 10px 10px 20px 10px;
  background: #fff;
}
.consult {
  margin-top: 10px;
  display: flex;

  a {
    display: flex;
    margin: 0 5px;
    font-weight: 600;
    color: $color;
    img {
      margin-left: 2px;
    }
  }
}
</style>
